<template>
  <div class="container">
    <el-row class="top-row">
      <el-col :span="3">
        <el-select v-model="groupType" size="small" placeholder="选择组类别">
          <el-option
            v-for="(item, index) in groupTypeList"
            :key="index"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
      </el-col>
      <el-col :span="1">
        <el-button
          v-show="hasAdd"
          type="primary"
          icon="el-icon-plus"
          size="small"
          @click="openAdditWindow"
        >
          新增
        </el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="14">
        <el-table
          v-loading="hasLoading"
          class="table-row"
          size="small"
          :data="groupList"
          highlight-current-row
          @current-change="handleSelectGroup"
        >
          <el-table-column label="用户组名" align="center" prop="emgname" />
          <el-table-column label="组说明" align="center" prop="detail" />

          <el-table-column label="备注" align="center" prop="remark" />
          <el-table-column label="操作" align="center">
            <template slot-scope="{ row }">
              <el-button
                v-show="hasUpdate"
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="openEditorWindow(row)"
              >
                修改
              </el-button>
              <el-button
                v-show="hasDelete"
                icon="el-icon-delete"
                type="danger"
                size="mini"
                @click="handleDeleteRow(row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>

      <el-col :span="8" :offset="1">
        <el-row style="margin-top: 10px">
          <el-input
            prefix-icon="el-icon-search"
            placeholder="关键词"
            v-model="userKeyword"
          ></el-input>
        </el-row>
        <el-row style="margin-top: 5px; border: 1px #ddd solid">
          <el-table
            v-loading="userListLoading"
            height="300"
            :show-header="false"
            :data="userList"
            highlight-current-row
            @current-change="handleUserSelected"
          >
            <el-table-column>
              <template slot-scope="{ row }">
                {{ row.username }} [{{ row.cnname }}]
              </template>
            </el-table-column>
          </el-table>
        </el-row>

        <el-row style="margin-top: 10px">
          <el-col :span="7" :offset="7">
            <el-button
              v-show="hasAddUser"
              type="primary"
              icon="el-icon-arrow-up"
              @click="handleAddUserToGroup"
              >添加</el-button
            >
          </el-col>
          <el-col :span="7">
            <el-button
              v-show="hasRemoveUser"
              type="danger"
              icon="el-icon-arrow-down"
              @click="handleRemoveUserFormGroup"
              >移除</el-button
            >
          </el-col>
        </el-row>

        <el-row style="margin-top: 10px">
          <el-input
            prefix-icon="el-icon-search"
            placeholder="关键词"
            v-model="noUserKeyword"
          ></el-input>
        </el-row>
        <el-row style="margin-top: 5px; border: 1px #ddd solid">
          <el-table
            v-loading="noUserListLoading"
            height="300"
            :show-header="false"
            :data="noUserList"
            highlight-current-row
            @current-change="handleNoUserSelected"
          >
            <el-table-column>
              <template slot-scope="{ row }">
                {{ row.username }} [{{ row.cnname }}]
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-col>
    </el-row>

    <el-dialog title="📝新增" :visible.sync="addit.show" width="50%">
      <user-group-form
        ref="additForm"
        :data="addit.target"
        @submit="handleSubmitAdditForm"
      ></user-group-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addit.show = false">取消</el-button>
        <el-button type="primary" @click="handleCheckAdditForm">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="📝修改" :visible.sync="editor.show" width="50%">
      <user-group-form
        ref="editorForm"
        :data="editor.target"
        @submit="handleSubmitEditorForm"
      ></user-group-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editor.show = false">取消</el-button>
        <el-button type="primary" @click="handleCheckEditorForm">
          确定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent } from "@vue/composition-api";
import {
  useUserGroupList,
  groupTypeList,
  useAllotUsers,
  useAddit,
  useEditor,
} from "./states";
import UserGroupForm from "./UserGroupForm.vue";
import { hasUserGroupPermission } from "./perm";
import { Message } from "element-ui";

export default defineComponent({
  components: { UserGroupForm },
  setup() {
    const {
      hasAdd,
      hasUpdate,
      hasDelete,
      hasSelect,
      hasAddUser,
      hasRemoveUser,
    } = hasUserGroupPermission();

    if (hasSelect === false) {
      Message.warning("您没有对该页面的查询权限...");
    }

    const { groupList, groupType, hasLoading, handleDeleteRow } =
      useUserGroupList();

    const {
      userList,
      noUserList,
      userKeyword,
      noUserKeyword,
      userListLoading,
      noUserListLoading,
      handleSelectGroup,
      handleUserSelected,
      handleNoUserSelected,
      handleAddUserToGroup,
      handleRemoveUserFormGroup,
    } = useAllotUsers();

    const {
      editor,
      openEditorWindow,
      closeEditorWindow,
      handleCheckEditorForm,
      handleSubmitEditorForm,
    } = useEditor();

    const {
      addit,
      openAdditWindow,
      closeAdditWindow,
      handleCheckAdditForm,
      handleSubmitAdditForm,
    } = useAddit();

    return {
      // constants
      groupTypeList,

      // states
      groupList,
      groupType,
      hasLoading,
      userList,
      noUserList,
      userKeyword,
      noUserKeyword,
      userListLoading,
      noUserListLoading,
      editor,
      addit,

      // methods
      handleSelectGroup,
      openAdditWindow,
      closeAdditWindow,
      handleCheckAdditForm,
      handleSubmitAdditForm,
      openEditorWindow,
      closeEditorWindow,
      handleCheckEditorForm,
      handleSubmitEditorForm,
      handleDeleteRow,
      handleUserSelected,
      handleNoUserSelected,
      handleAddUserToGroup,
      handleRemoveUserFormGroup,

      // permission
      hasAdd,
      hasUpdate,
      hasDelete,
      hasAddUser,
      hasRemoveUser,
    };
  },
});
</script>

<style scoped>
.container {
  padding-left: 20px;
}
/* 顶行 */
.top-row {
  margin-top: 15px;
}

/* 表格行 */
.table-row {
  border: 1px #ddd solid;
  margin-top: 10px;
}
</style>
